@import '~antd/dist/antd.less';
@import '../colors';
@import './antd.less';

// ANTD COLOR MAPPING
@primary-color: @teal-light; // var(--teal)
@info-color: @yellow-light; // var(--info)
@success-color: @teal-light; // var(--teal)
@processing-color: @teal-light; // var(--teal)
@error-color: @red-light; // var(--warning)
@highlight-color: @purple-light; // var(--accent)
@warning-color: @yellow-light; // var(--info)
@normal-color: @light-5; // var(--midtone)
@disabled-color: fade(@dark-4, 50%); // var(--paragraph)
@disabled-bg: fade(@dark-5, 50%); // var(--button)

@primary-1: lighten(@teal-light, 4%); // var(--teal-hover)
@primary-2: lighten(@teal-light, 4%); // var(--teal-hover)
@primary-5: fade(@teal-light, 8%); // var(--teal-semi)
@primary-7: fade(@teal-light, 8%); // var(--teal-semi)

@text-color: @dark-4; // var(--paragraph)
@text-color-secondary: @dark-4; // var(--paragraph)
@text-color-dark: @dark-4; // var(--paragraph)
@text-color-secondary-dark: @dark-4; // var(--paragraph)
@icon-color: @light-5; // var(--icon)
@icon-color-hover: @light-5; // var(--icon)
@heading-color: @dark-2; // var(--title)


@component-background: @light-2; // var(--background)
@popover-background: @light-2; // var(--background)
@background-color-light: @light-2; // var(--background)
@background-color-base: @light-2; // var(--background)
@border-color-split: @light-4; // var(--border)

@item-active-bg: darken(@light-1, 4%); // var(--dropdown-alt-bg)
@item-hover-bg: darken(@light-1, 4%); // var(--dropdown-alt-bg)

@link-color: @dark-2; // var(--title)
@link-hover-color: @dark-2; // var(--title)
@link-active-color: @dark-2; // var(--title)

@border-color-base: @light-4; // var(--border)
@border-color-split: @light-4; // var(--border)
@border-color-inverse: @light-4; // var(--border)

@shadow-color: rgba(55, 71, 79, 0.12); // var(--shadow)
@shadow-color-inverse: rgba(55, 71, 79, 0.12); // var(--shadow)
@btn-shadow: rgba(55, 71, 79, 0.12); // var(--shadow)
@btn-primary-shadow: rgba(55, 71, 79, 0.12); // var(--shadow)
@btn-text-shadow: rgba(55, 71, 79, 0.12); // var(--shadow)

@btn-danger-color: @red-light; // var(--warning)
@btn-danger-bg: fade(@red-light, 28%); // var(--warning-bg)
@btn-text-hover-bg: transparent;
@btn-default-bg: @light-4; // var(--button)

@checkbox-check-color: @dark-2; // var(--title)

@radio-dot-disabled-color: @light-2; // var(--background)
@radio-disabled-button-checked-bg: @light-2; // var(--background)

@select-multiple-item-disabled-color: @dark-4; // var(--paragraph)
@select-item-selected-color: @white;

@slider-rail-background-color: @dark-2; // var(--slider-bg)
@slider-rail-background-color-hover: @dark-2; // var(--slider-bg)
@slider-track-background-color: @teal-light; // var(--teal)
@slider-track-background-color-hover: @teal-light; // var(--teal)
@slider-handle-background-color: @light-5; // var(--icon)
@slider-handle-color: @light-5; // var(--icon)
@slider-handle-color-hover: @light-5; // var(--icon)
@slider-handle-color-focus: @light-5; // var(--icon)
@slider-handle-color-focus-shadow: rgba(55, 71, 79, 0.12); // var(--shadow)
@slider-handle-color-tooltip-open: @light-5; // var(--icon)
@slider-dot-border-color-active: @light-4; // var(--border)


@input-placeholder-color: @dark-4; // var(--paragraph)
@input-number-handler-active-bg: @dark-4; // var(--paragraph)
@input-icon-hover-color: @light-5; // var(--icon)
@input-disabled-color: @disabled-color;

@layout-body-background: @light-2; // var(--background)
@layout-header-background: @light-2; // var(--background)
@layout-trigger-background: @light-2; // var(--background)
@layout-trigger-color: @dark-4; // var(--paragraph)
@layout-sider-background-light: @light-2; // var(--background)
@layout-trigger-background-light: @light-2; // var(--background)

@divider-color: @light-4; // var(--border)

@tooltip-color: @dark-4; // var(--paragraph)
@tooltip-bg: @light-3; // var(--section)
@tooltip-arrow-width: 4px;

@modal-mask-bg: rgba(0, 0, 0, 0.3); // var(--modal-overlay)

@menu-item-active-danger-bg: @red-light; // var(--warning)
@menu-dark-arrow-color: @dark-2; // var(--title)
@menu-dark-inline-submenu-bg: @light-3; // var(--section)
@menu-dark-highlight-color: @dark-2; // var(--title)

@table-selected-row-hover-bg: @primary-5;
@table-expanded-row-bg: @light-3; // var(--section)
@table-header-filter-active-bg: @light-3; // var(--section)

@picker-basic-cell-hover-with-range-color: fade(@teal-light, 8%); // var(--teal-semi)
@picker-date-hover-range-border-color: fade(@teal-light, 8%); // var(--teal-semi)

@comment-author-time-color: @dark-4; // var(--paragraph)
@comment-action-hover-color: @light-2; // var(--background)

@back-top-color: @dark-2; // var(--title)

@alert-success-border-color: @teal-light; // var(--teal)
@alert-success-bg-color: fade(@teal-light, 8%); // var(--teal-semi)
@alert-success-icon-color: @teal-light; // var(--teal)
@alert-info-border-color: @yellow-light; // var(--info)
@alert-info-bg-color: fade(@yellow-dark, 8%); // var(--info-semi)
@alert-info-icon-color: @yellow-light; // var(--info)
@alert-warning-border-color: @red-light; // var(--warning)
@alert-warning-bg-color: fade(@red-light, 28%); // var(--warning-bg)
@alert-warning-icon-color: @red-light; // var(--warning)
@alert-error-border-color: @red-light; // var(--warning)
@alert-error-bg-color: fade(@red-light, 28%); // var(--warning-bg)
@alert-error-icon-color: @red-light; // var(--warning)
@alert-message-color: @dark-2; // var(--title)

@image-bg: transparent;
@image-color: transparent;

@border-radius-base: 4px;
@font-family: 'Roboto', sans-serif;

// ADDITIONAL STYLES
.ant-modal-footer {
  background-color: @light-3; // var(--section)
}

// make button text not disappear on hover
.ant-btn:hover,
.ant-btn:focus {
  color: @heading-color;
}

// change color for the search box
#mainWrapper .ant-select-selector input {
  color: @dark-4; // var(--paragraph)
}
